Los marcos modernos como Vue y React comienzan con CSS en línea dentro de componentes individuales. Por ejemplo, en un componente de archivo único de Vue, incluimos todo el Javascript, HTML y CSS en un archivo .vue . Por lo general, hay un paso de compilación o algún cálculo que compila estos cambios en fragmentos, que se cargan en la página en función de los componentes que son visibles para el usuario.

Puedo apreciar que esta puede ser la forma más eficiente de compilar CSS para múltiples componentes y cargarlo en una página.

Mi pregunta se relaciona principalmente con el rendimiento. Supongamos que en lugar de compilar todos los estilos de componentes en fragmentos, React o Vue enviaron esto en su lugar, cuando se procesa un componente:

 <div id="someComponent"> <!-- My component HTML goes here --> </div> <style> /* Associated styles */ #someComponent { color: red; } </style>

Eso significa que en lugar de tener un archivo de fragmentos CSS, los estilos simplemente se alinean y se incluyen junto al componente con el que se relacionan en el sitio web en vivo.

Sé que esto es complicado, pero mi pregunta es, ¿hay algún problema de rendimiento al hacer esto? Hubiera pensado que esto en realidad podría ser más eficaz, ya que cargar un fragmento requiere una solicitud HTTP, que obviamente tiene una sobrecarga, mientras que esto se incluye en una sola solicitud HTTP cuando el usuario abre la página web.